<template>
    <div>
        <el-card class="box-card">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                <el-menu-item index="0" @click="ShowDate('0')">当天</el-menu-item>
                <el-menu-item index="7" @click="ShowDate('7')">7天</el-menu-item>
                <el-menu-item index="30" @click="ShowDate('30')">30天</el-menu-item> </el-menu
            ><br />
            <el-card class="box-card2">
                <div class="text item">
                    <h1>{{ totalSign }}</h1>
                    <br />
                    <span>总运单数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>1</h1>
                    <br />
                    <span>总设备数</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{ nowSign }}</h1>
                    <br />
                    <span>在途运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
            <el-card class="box-card1">
                <div class="text item">
                    <h1>{{ policeSign }}</h1>
                    <br />
                    <span>报警运单</span>
                    <br /><br /><br />
                    <el-button type="primary" round>立刻查看</el-button>
                </div>
            </el-card>
        </el-card>
        <div>
            <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="consignment"
                label="订单号"
                width="180">
            </el-table-column>
            <el-table-column
                label="标签ID">
                <template slot-scope="scope">
                    {{scope.row.tag.tag}}
                </template>
            </el-table-column>
            <el-table-column
                label="货物类型">
                <template slot-scope="scope">
                    {{scope.row.tag.cargo.name}}
                </template>
            </el-table-column>
            <el-table-column
                label="简介">
                <template slot-scope="scope">
                    {{scope.row.tag.cargo.brief}}
                </template>
            </el-table-column>
            <el-table-column
                label="延迟时间">
                <template slot-scope="scope">
                    {{scope.row.tag.cargo.delay}}
                </template>
            </el-table-column>
            <el-table-column
                label="安全范围">
                <template slot-scope="scope">
                    {{scope.row.tag.cargo.begin}}~{{scope.row.tag.cargo.end}}
                </template>
            </el-table-column>
            <el-table-column
                label="记录间隔">
                <template slot-scope="scope">
                    {{scope.row.tag.cargo.record}}
                </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="订单状态"
                width="180">
            </el-table-column>
            <el-table-column
                prop="begin"
                label="开始时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="end"
                label="结束时间"
                width="180">
            </el-table-column>
            <el-table-column
                prop="temp"
                label="状态"
                width="180">
            </el-table-column>
            <el-table-column
                label="详情"
                width="180">
                <template slot-scope="scope">
                    <router-link :to="{'path':'/temp','query':{'id':scope.row.id}}">查看</router-link>
                </template>
            </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { ShowTotalSign } from '../../api/api.js'
export default {
    data() {
        return {
            activeIndex: '0',
            totalSign:0,
            nowSign:0,
            policeSign:0,
            tableData:[]
        };
    },
    methods: {
        ShowDate(date){
            var num = date
            let n = num;
            let d = new Date();
            let year = d.getFullYear();
            let mon = d.getMonth() + 1;
            let day = d.getDate();
            if(day <= n) {
                if(mon > 1) {
                    mon = mon - 1;
                } else {
                    year = year - 1;
                    mon = 12;
                }
            }
            d.setDate(d.getDate() - n);
            year = d.getFullYear();
            mon = d.getMonth() + 1;
            day = d.getDate();
            let s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
            
            let params = {
                "date":s
            }
            ShowTotalSign(params).then(res=>{
                this.tableData = res.data
                this.totalSign = res.data.length
                // console.log(res)
                this.policeSign = 0
                this.nowSign = 0
                for(let i=0;i<this.tableData.length;i++){
                    if(this.tableData[i].state == '在途'){
                        this.nowSign += 1
                    }
                    if(this.tableData[i].temp == '异常'){
                        this.policeSign += 1
                    }
                    
                }
            })
        }
    },

    mounted: function() {
        this.ShowDate(0)
    },

    
};
</script>

<style>
.text {
    font-size: 14px;
    text-align: center;
    margin: auto;
}

.item {
    padding: 18px 0;
    width: 25%;
}

.box-card {
    width: 100%;
}
.box-card1 {
    width: 25%;
    height: 250px;
    float: left;
}
.box-card2 {
    width: 24%;
    height: 250px;
    float: left;
}
</style>